<template>
	<div class="cont">
		<div class="cont2">
			<p>当季目的地</p>
			<p class="ppp">你朋友圈的旅行内容，我们包了</p>
			<a>更多</a>
		</div>
		<div class="cont3">
			<ul>
				<li class="active">国内</li>
				<li>出境</li>
			</ul>
			<div class="cont4">
				<a>
				<p class="title">牛背山</p>
				<p class="desc">王者归来</p>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Cont'
	}
</script>

<style scoped>
	.cont{
		margin-top: .2rem;
		    padding: 0 .2rem .3rem;
		    width: 100%;
		    background-color: #fff;
		    border-radius: .3rem;
		    box-sizing: border-box;
		    overflow: hidden;
	}
	.cont2{
		position: relative;
		    display: flex;
		    align-items: center;
		    padding: 0 .31rem 0 .13rem;
		    height: .88rem;
		    overflow: hidden;
	}
	.cont2{
		flex-shrink: 0;
		    margin-right: .29rem;
		    font-size: .32rem;
		    font-weight: bold;
		    color: #333;
	}
	.ppp{
		padding: 0 .11rem;
		    max-width: 4rem;
		    height: .36rem;
		    line-height: .36rem;
		    background-color: #fff3ea;
		    font-size: .24rem;
		    color: #ff9e51;
		    box-sizing: border-box;
		    border-radius: .08rem;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    overflow: hidden;
	}
	.cont2{
		position: absolute;
		    right: 0;
		    padding-right: .16rem;
		    background: url(../../../assets/img/img5.b2d8430d.png) no-repeat right center/0.1rem .18rem;
		    font-size: .28rem;
		    color: #333;
	}
	.active{
		font-size: .3rem;
		    font-weight: bold;
		    color: #e6ac00;
		    box-shadow: 0 0 0.12rem 0 rgb(125 125 125 / 15%);
	}
	.cont3 li{
		display: flex;
		    align-items: center;
		    justify-content: center;
		    margin-right: .2rem;
		    width: 1.58rem;
		    height: .54rem;
		    font-size: .28rem;
		    color: #666;
		    border: 1px solid #eee;
		    border-radius: .3rem;
	}
	.cont4{
		display: flex;
		    flex-wrap: wrap;
		    margin-top: .2rem;
	}
	.cont4 a{
		position: relative;
		    margin-right: .06rem;
		    width: 2.32rem;
		    height: 2.32rem;
		    background: #fff9db no-repeat center center/cover;
		    z-index: 1;
		    overflow: hidden;
			background-image: url(../../../assets/img/a51c2e274e481456.jpg);
	}
	.title{
		position: relative;
		    margin-top: .6rem;
		    font-size: .32rem;
		    font-weight: bold;
		    z-index: 10;
	}
	.desc{
		position: relative;
		    font-size: .24rem;
		    opacity: .6;
		    z-index: 10;
	}
</style>
